<template>
	<div :class="'common_footer'+(!/sign|view|map|videos|channel|nodata/.test(webType) ? ' on' : '')">
		<div v-if="!/sign|view|map|videos|channel|nodata/.test(webType)" class="common_footer_asmain">
			<CustomButton @gohomeClickHandle="gohomeClickHandle" slottype="11">
				<i :class="webType === 'home' ? 'icon home' : 'icon3 home'" slot="home"></i>
			</CustomButton>
			<CustomButton @goSeachClickHandle="goSeachClickHandle" slottype="12">
				<i :class="webType === 'search' ? 'icon3 search' : 'icon search'" slot="home"></i>
			</CustomButton>
			<!--CustomButton @showUpdateFile="showUpdateFile" slottype="13">
				<i class="icon updateimage_down" slot="home"></i>
			</CustomButton-->
			<CustomButton @goGoodsClickHandle="goGoodsClickHandle" slottype="14">
				<i :class="webType === 'feeds' ? 'icon3 goods' : 'icon goods'" slot="home"></i>
			</CustomButton>
			<CustomButton @goUserClickHandle="goUserClickHandle" slottype="15">
				<i :class="webType === 'user' ? 'icon3 my' : 'icon my'" slot="home"></i>
			</CustomButton>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'common_footer',
		props:["webType","isLogin"],
		data: function(){
			return {
				
			}
		},
		components:{
			CustomButton: r => require.ensure([], () => r(require('../components/button.vue')), 'custom_button')
		},
		mounted:function(){
			
		},
		methods:{
			showUpdateFile(){
				
			},
			gohomeClickHandle(){
				this.$router.push('/')
			},
			goSeachClickHandle(){
				this.$router.push('/search/中国')
			},
			goGoodsClickHandle(){
				this.$router.push('/goods')
			},
			goUserClickHandle(){
				this.$router.push('/user')
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.common_footer{
		position: fixed;
		z-index: 99998;
		bottom:0;
		left:0;
		right:0;
		background-color: #fff;
		border-top:1/@base solid #e6e6e6;
		&.on{
			padding:5/@base;
			.common_footer_asmain{
				display:flex;
			}
		}
		.custom_button{
			width:25%;
			text-align: center;
			a{
				margin:0 auto;
				i{
					margin:0 auto;
					&.icon{
						&.updateimage{
							margin:0;
						}
					}
				}
			}
		}
	}
	.icon3{
		&.home{
			background-size: 355px 344px;
    		background-position: -50px -295px;
			width:24px;
			height:24px;
		}
		&.search{
			background-size: 355px 344px;
			background-position: -125px -320px;
			width:24px;
			height:24px;
		}
		&.goods{
			background-size: 355px 344px;
    		background-position: -275px -270px;
			width:24px;
			height:24px;
		}
		&.my{
			background-size: 355px 344px;
    		background-position: -200px -270px;
			width:24px;
			height:24px;
		}
	}
	.icon{
		&.home{
			background-size: 355px 344px;
			background-position: -300px -270px;
			width:24px;
			height:24px;
		}
		&.search{
			background-size: 355px 344px;
   			background-position: -100px -320px;
			width:24px;
			height:24px;
		}
		&.updateimage_down{
			background-size: 355px 344px;
    		background-position: -331px -100px;
			width:24px;
			height:24px;
		}
		&.goods{
			background-size: 355px 344px;
    		background-position: -275px -270px;
			width:24px;
			height:24px;
		}
		&.my{
			background-size: 355px 344px;
    		background-position: -125px -270px;
			width:24px;
			height:24px;
		}
	}
</style>